//请求获取数据
data = {}
axios.get('../../php/getTeamInfo.php').then(res => {
  data = res.data
  console.log(data)
  renderWin(data.winRate)
  renderVote(data.voteTeam)
})


//渲染夺冠胜率
const renderWin = (data) => {
  var myCharts = echarts.init(document.querySelector('#win'))
  // 需要设置给饼图的数据
  //访问数组的元素
  var passed_array = data
  //显示数组中的元素
  let pieList = []
  for (let i = 0;i < passed_array.length;i++) {
    var d = new Object()
    d.name = passed_array[i]['name']
    d.value = passed_array[i]['value']
    pieList.push(d)
  }
  var option = {
    tooltip: {
      trigger: 'item'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    // 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
    legend: {
      type: 'scroll',
      orient: 'vertical',
      left: 5,
      top: 20,
      bottom: 20,
    },
    series: [{
      type: 'pie', // 类型： 饼图
      data: pieList, //数据
      label: { //饼图文字的显示
        show: true, //默认  显示文字
        formatter: function (arg) {
          // console.log(arg)
          return arg.name + +arg.percent + "%"
        }
      },
      center: ['56%', '50%'],
      radius: 220, //饼图的半径
      // radius: '20%' //百分比参照的事宽度和高度中较小的那一部分的一半来进行百分比设置
      // 圆环
      // radius: ['50%','80%']

      // 南丁格尔图  饼图的每一个部分的半径是不同的
      // roseType: 'radius',
      selectedMode: 'single', //选中的效果，能够将选中的区域偏离圆点一小段距离
      //selectedMode: 'multiple',
      selectedOffset: 30
    }]
  }
  option && myCharts.setOption(option)
}

//渲染用户支持
const renderVote = (data) => {
  var chartDom = document.getElementById('vote')
  var myChart = echarts.init(chartDom)
  var option

  // 需要设置给饼图的数据
  //访问数组的元素
  var passed_array = data
  //显示数组中的元素
  let pieList = []
  for (let i = 0;i < passed_array.length;i++) {
    var d = new Object()
    d.name = passed_array[i]['name']
    d.value = passed_array[i]['value']
    pieList.push(d)
  }

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: 'bottom',
      type: 'scroll',
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        type: 'pie',
        radius: [40, 230],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        label: {
          show: true,
          formatter (param) {
            // correct the percentage
            return param.name + ' (' + param.percent * 2 + '%)'
          }
        },
        data: pieList
      }
    ]
  }

  option && myChart.setOption(option)
}